<template>
  <div>
    <!-- 背景和群聊头像 -->
    <div
      :style="{
        height: '140px',
        backgroundImage: `url(${GroupInfo.bgImage})`,
        backgroundSize: 'cover',
        backgroundPosition: 'center',
      }"
      class="w-full relative text-white z-10 top-0 left-0"
    >
      <!-- 关闭按钮 -->
      <div class="w-full text-white absolute top-0 p-2">
        <p class="iconfont icon-guanbi text-end cursor-pointer" @click="closeDetail"></p>
      </div>
      <!-- 群聊头像和信息 -->
      <div class="w-full text-base absolute bottom-2 flex flex-row justify-between items-center px-3">
        <div class="flex flex-row items-center gap-3">
          <n-avatar :size="48" :src="chat.ChatObject?.avatar ?? ''" />
          <div>
            <p>{{ chat.ChatObject?.name ?? "" }}</p>
            <p class="text-xs">{{ GroupInfo.description }}</p>
          </div>
        </div>
      </div>
    </div>
    <!-- 群聊设置 -->
    <div class="w-full h-[calc(100vh-150px)] flex flex-col px-4 mt-2 gap-2 overflow-y-auto text-fontPrimary">
      <!-- 群成员 -->
      <div class="bg-Input p-3 text-center rounded cursor-pointer">
        <p class="flex flex-row justify-between items-center pb-3 text-fontPrimary">
          <span>群聊成员</span>
          <span class="text-fontPlaceholde text-xs">查看{{ GroupMembers.length }}群成员</span>
        </p>
        <div class="flex flex-row gap-4 flex-wrap text-fontPrimary">
          <div v-for="item of GroupMembers" class="flex flex-col items-center gap-1">
            <n-avatar :src="item.avatar!" round></n-avatar>
            <span class="text-xs">{{ item.name }}</span>
          </div>
          <div class="flex flex-col justify-center items-center gap-1">
            <n-avatar round>+</n-avatar>
            <span class="text-xs">邀请</span>
          </div>
        </div>
      </div>

      <!--  群资料修改 -->
      <div class="cursor-pointer" @click="showEditGroupModal = true" v-if="GroupInfo.ownerId === user.userId">
        <p class="text-xs my-[5px] text-fontSecondary">资料管理</p>
        <p class="flex flex-row justify-between items-center bg-Input p-2 rounded">
          <span class="flex-1 px-1">群信息设置</span>
          <ArrowForward style="width: 1em; height: 1em" />
        </p>
      </div>

      <!-- 公告 -->
      <div>
        <p class="text-xs my-[5px] text-fontSecondary">公告</p>
        <p class="flex flex-row justify-between items-center bg-Input p-2 rounded">
          <span class="flex-1 px-1 text-fontPrimary">暂无公告</span>
          <ArrowForward style="width: 1em; height: 1em" />
        </p>
      </div>

      <!-- 我本群的昵称 -->
      <div>
        <p class="text-xs my-[5px] text-fontSecondary">我本群的昵称</p>
        <n-input
          class="rounded custom-shadow border-(solid 1px [--bg-input])"
          placeholder="请输入命名昵称"
          style="background-color: var(--bg-input)"
        ></n-input>
      </div>

      <!-- 群备注 -->
      <div>
        <p class="text-xs my-[5px] text-fontSecondary">群备注</p>
        <n-input
          class="rounded custom-shadow border-(solid 1px [--bg-input])"
          placeholder="请输入群备注"
          style="background-color: var(--bg-input)"
        ></n-input>
      </div>

      <!-- 置顶和免打扰 -->
      <div class="bg-Input p-2 text-center rounded">
        <p class="flex flex-row justify-between items-center">
          <span>设为置顶</span>
          <n-switch v-model:value="active" />
        </p>
        <div class="w-full h-[1px] bg-bgBorder m-[10px_0]"></div>
        <p class="flex flex-row justify-between items-center">
          <span>消息免打扰</span>
          <n-switch v-model:value="active" />
        </p>
      </div>

      <!-- 删除聊天记录 -->
      <div class="bg-Input p-1.5 text-center rounded cursor-pointer" @click="DeleteAllMessage">删除聊天记录</div>

      <!-- 退出群聊 -->
      <div class="bg-Input p-1.5 text-red-600 text-center rounded cursor-pointer">退出群聊</div>
    </div>
  </div>
  <!-- 群资料修改弹窗 -->
  <n-modal v-model:show="showEditGroupModal" class="w-[460px] rounded p-2" preset="card">
    <template #header>
      <span class="text-[14px] text-fontRegular">群资料修改</span>
    </template>
    <EditGroupInfo :GroupInfo="GroupInfo" @cancel="() => (showEditGroupModal = false)" />
  </n-modal>
</template>

<script lang="ts" setup>
import { computed, ref } from "vue";
import { ChatType } from "@/types/chat.ts";
import { IGroupListItem, IGroupMember } from "@/types/group.ts";
import { useUser } from "@/store/modules/user.ts";
import { useChat } from "@/store/modules/chat.ts";
import { useCache } from "@/store/modules/cache.ts";
import { useSession } from "@/store/modules/session.ts";
import EditGroupInfo from "./EditGroupInfo.vue";
import { ElMessage } from "element-plus";
import { NAvatar, NInput, NModal, NSwitch } from "naive-ui";
import { ArrowForward } from "@vicons/ionicons5";

const user = useUser();
const chat = useChat();
const cache = useCache();
const session = useSession();
let active = ref(false);
let showEditGroupModal = ref(false);

const GroupInfo = computed(() => {
  if (!chat.ChatObject) return {} as IGroupListItem;
  let info = cache.GetGroupInfo(chat.ChatObject.id);
  if (!info) return {} as IGroupListItem;
  return info;
});

const GroupMembers = computed((): IGroupMember[] => {
  if (!chat.ChatObject) return [] as IGroupMember[];
  let members = cache.GroupMemberCache.get(chat.ChatObject.id);
  if (!members) return [] as IGroupMember[];
  return members;
});

withDefaults(
  defineProps<{
    closeDetail: (event: MouseEvent) => void;
  }>(),
  {
    closeDetail: () => {},
  },
);

// 删除全部消息
async function DeleteAllMessage() {
  if (!chat.ChatObject) return;
  let res = await window.electronApi.deleteMessageByAll(user.userId!, chat.ChatObject.id, ChatType.group);
  if (!res) {
    ElMessage.error("删除聊天记录失败");
    return;
  }
  ElMessage.success("删除聊天记录成功");
  chat.MessageList = [];
  await session.UpdateSessionByField(chat.ChatObject.sessionId, { content: "" }, true);
}
</script>

<style lang="scss" scoped></style>
